// 对象形式的写法

// 懒加载的模式 需要添加loading
import React, { lazy } from "react"
import Home from "../views/Home"
// import About from "@/views/About"

import Login from '../views/Login'

const Page1 = lazy(()=>import("../views/Page1"))
const Page2 = lazy(()=>import("../views/Page2"))
const Page301 = lazy(()=>import("../views/Page301"))
const withLoadingComponent = (comp:JSX.Element) => {
    return  (
        <React.Suspense fallback={<div>loading</div>}>
            {comp}
        </React.Suspense>
    )
}

import { Navigate } from "react-router-dom"
const routes = [
    {
        path:"/",
        element: <Navigate to="/page1"/>
    },
    {
        path:"/",
        element: <Home/>,
        children:[
            {
                path:"/page1",
                element: withLoadingComponent(<Page1></Page1>)
            },
            {
                path:"/page2",
                element: withLoadingComponent(<Page2></Page2>)
            },
            {
                path:"/page3/page301",
                element: withLoadingComponent(<Page301></Page301>)
            }
        ]
    },
    // 访问其余路径的时候直接跳转到首页
    {
        path: '*',
        element: <Navigate to="/page1" />
    },
    {
        path: '/login',
        element: <Login />
    },
]
export default routes